<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区 -->
      <el-card class="box-card">
        <!-- form表单组件应用 -->
        <el-form ref="addFormRef" :model="addForm" label-width="80px">
          <el-form-item label="科学：" prop="subjectID">
            <el-select v-model="addForm.subjectID">
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select v-model="addForm.catalogID">
              <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select v-model="addForm.enterpriseID">
              <el-option
                v-for="item in enterpriseIDList"
                :key="item.id"
                :label="item.shortName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：">
            <el-select v-model="addForm.province" @change="addForm.city=''">
              <el-option v-for="(item,k) in provinces()" :key="k" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="addForm.city">
              <el-option
                v-for="(item,k) in citys(addForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select v-model="addForm.direction">
              <el-option v-for="item in directionList" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="addForm.questionType">
              <el-radio
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="addForm.difficulty">
              <el-radio
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干：" prop="question">
            <el-input type="textarea" v-model="addForm.question"></el-input>
          </el-form-item>
          <el-form-item label="选项：" v-if="addForm.questionType!=='3'">
            <!-- 单选框 -->
            <template v-if="addForm.questionType==='1'">
              <el-radio v-model="singleSelect" label="0">
                A.
                <el-input v-model="addForm.options[0].title"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" label="1">
                B.
                <el-input v-model="addForm.options[1].title"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" label="2">
                C.
                <el-input v-model="addForm.options[2].title"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" label="3">
                D.
                <el-input v-model="addForm.options[3].title"></el-input>
              </el-radio>
            </template>
            <!-- 复选框按钮 -->
            <template v-if="addForm.questionType==='2'">
              <el-checkbox v-model="addForm.options[0].isRight">
                A.
                <el-input v-model="addForm.options[0].title"></el-input>
              </el-checkbox>
              <el-checkbox v-model="addForm.options[1].isRight">
                B.
                <el-input v-model="addForm.options[1].title"></el-input>
              </el-checkbox>
              <el-checkbox v-model="addForm.options[2].isRight">
                C.
                <el-input v-model="addForm.options[2].title"></el-input>
              </el-checkbox>
              <el-checkbox v-model="addForm.options[3].isRight">
                D.
                <el-input v-model="addForm.options[3].title"></el-input>
              </el-checkbox>
            </template>
          </el-form-item>
          <el-form-item label="答案：" prop="answer">
            <el-input type="textarea" v-model="addForm.answer"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remarks">
            <el-input type="textarea" v-model="addForm.remarks"></el-input>
          </el-form-item>
          <el-form-item label="标签：" prop="tags">
            <el-input type="textarea" v-model="addForm.tags"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="$refs.addFormRef.resetFields()">取消/重置</el-button>
            <el-button type="primary" @click="tianjia()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/questions.js' //添加试题
import { list as listCompanys } from '@/api/hmmm/companys.js' //企业
import { simple as simpleSubjects } from '@/api/hmmm/subjects' //学科
import { simple as simpleDirectorys } from '@/api/hmmm/directorys' //二级目录
import { provinces, citys } from '@/api/hmmm/citys' //城市和区县
//常亮（方向）
import {
  direction as directionList,
  questionType as questionTypeList,
  difficulty as difficultyList
} from '@/api/hmmm/constants'

export default {
  name: 'QuestionsNew',
  watch: {
    singleSelect(newV) {
      for (var i = 0; i < 4; i++) {
        this.addForm.options[i].isRight = false
      }
      this.addForm.options[newV].isRight = true
    }
  },
  data() {
    return {
      enterpriseIDList: [], //企业
      subjectIDList: [], //学科
      catalogIDList: [], //二级目录
      difficultyList, //难度
      questionTypeList, //题型
      directionList, //方向（简易成员赋值）

      singleSelect: '', //临时成员，接收“选项”单选按钮选中的信息
      //添加试题 表单数据对象
      addForm: {
        //来自接口数据
        difficulty: '1', //难度
        questionType: '1', //题型
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        enterpriseID: '', // 企业
        city: '', // 区县
        province: '', // 城市
        direction: '', // 方向
        question: '', //题干
        answer: '', //答案
        remarks: '', //备注
        tags: '', //标签
        videoURL: 'http://www.xxx.com', // 解析视频，固定内容即可

        options: [
          { code: 'A', title: '', img: '', isRight: false },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ]
      }
    }
  },
  created() {
    this.getEnterpriseIDList()
    //目录
    this.getCatalogIDList()
    //获取学科列表
    this.getSubjectIDList()
  },
  methods: {
    provinces,
    citys,
    //添加试题
    async tianjia() {
      const result = await add(this.addForm)
      //成功提示
      this.$message.success('添加试题成功')
      //页面跳转
      this.$router.push('/questions/list')
    },
    //企业
    async getEnterpriseIDList() {
      var result = await listCompanys()
      this.enterpriseIDList = result.data.items
    },
    //目录
    async getCatalogIDList() {
      var result = await simpleDirectorys()
      this.catalogIDList = result.data
    },
    //获取学科列表
    async getSubjectIDList() {
      var result = await simpleSubjects()
      this.subjectIDList = result.data
    }
  }
}
</script>

<style scoped>
.el-input {
  margin-top: 10px;
}
</style>
